<template>
  <el-menu
    :default-active="active"
    unique-opened
    background-color="transparent"
    router
    active-text-color="#fff"
  >
    <!-- 一级菜单 -->
    <el-sub-menu
      v-for="(item, index) in menuList"
      :key="index"
      :index="item.id"
    >
      <template #title>
        <component :is="item.icons?.icon" class="icon"></component>
        <span>{{ item.title }}</span>
      </template>
      <!-- 二级菜单 -->
      <el-menu-item
        v-for="(item1, index1) in item.children"
        :key="index1"
        :index="item1.path"
        @click="savePath(item1.path)"
      >
        <template #title>
          <el-icon><Menu /></el-icon>
          <span>{{ item1.title }}</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { Menu } from "@element-plus/icons-vue";
import { onMounted, reactive, ref } from "vue";
const menuList = reactive([
  {
    id: '0',
    title: "用户信息管理",
    children: [{ id: 0, title: "用户列表", path: "/admin/User" }],
    icons: { icon: "UserFilled" },
  },
  {
    id: '1',
    title: "失踪信息管理",
    children: [
      { id: 0, title: "失踪列表", path: "/admin/Loser" },
    ],
    icons: { icon: "PhoneFilled" },
  },
  {
    id: '2',
    title: "志愿者信息管理",
    children: [
      { id: 0, title: "志愿者列表", path: "/admin/Volunteer" },
      { id: 1, title: "志愿活动", path: "/admin/Volactive" },
    ],
    icons: { icon: "Avatar" },
  },
  {
    id: '3',
    title: "新闻信息管理",
    children: [
      // { id: 0, title: "相关视频", path: "/admin/Video" },
      // { id: 1, title: "相关新闻", path: "/admin/RelateNews" },
      { id: 2, title: "成功新闻", path: "/admin/Succnew" },
    ],
    icons: { icon: "VideoCameraFilled" },
  },
  {
    id: '4',
    title: "评论信息管理",
    children: [
      { id: 0, title: "评论列表", path: "/admin/Reviews" },
    ],
    icons: { icon: "Comment" },
  },
]);
const active = ref("");
onMounted(() => {
  active.value = window.sessionStorage.getItem("activePath") || active.value;
});

//保存刷新后的活跃状态
const savePath = (activePath: any) => {
  window.sessionStorage.setItem("activePath", activePath);
  active.value = activePath;
};
</script>

<style scoped>
.icon {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
</style>
